<template>
  <el-drawer
    v-model="showDrawer"
    :title="$t(`${props.from === 'create' ? '创建成功' : '挂单详情'}`)"
    size="35%"
    @close="emit('close')"
  >
    <el-card v-loading="loading">
      <div
        v-for="(item, index) in orderDetailList"
        :key="index"
        class="detailItem"
      >
        <span style="flex-shrink: 0">{{ item.name }}</span>
        <div style="max-width: 60%; word-break: break-all; text-align: right">
          {{ item.value }}
        </div>
      </div>
    </el-card>
    <div class="btnListCont">
      <!-- <el-button size="large" type="info" @click="setPendingOrder()"
        >{{ $t("删除") }}
      </el-button> -->

      <el-button
        size="large"
        type="primary"
        :disabled="orderData.status !== 1"
        @click="emit('close', orderData.record_id)"
        >{{ $t("编辑") }}
      </el-button>
      <!-- //已取消的订单不显示开始暂停按钮 -->
      <el-button
        v-show="orderData.status !== 2"
        size="large"
        :type="`${orderData.status === 0 ? 'warning' : 'success'}`"
        @click="setPendingOrder(orderData.status === 0 ? 1 : 0)"
        >{{ orderData.status === 0 ? $t("暂停") : $t("开启") }}
      </el-button>
    </div>
  </el-drawer>
</template>
<script setup>
import { ref, reactive, watch, toRefs, computed } from "vue";
import { getSwapMarketDetailApi, postSwapMarketSetApi } from "@/api/swap/index";
import { useI18n } from "vue-i18n";
import { dayjs, ElMessage } from "element-plus";
import _ from "lodash";
import { useStatusStore } from "@/store/modules/status";
const statusStore = useStatusStore();
const { t } = useI18n();

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  recordId: {
    type: String,
    default: "",
  },
  from: {
    type: String,
    default: "records",
  },
});
const emit = defineEmits(["close"]);
const loading = ref(true);
const showDrawer = ref(false);
watch(
  () => props.show,
  (newVal) => {
    showDrawer.value = newVal;
  },
  { immediate: true }
);
watch(
  () => props.recordId,
  (newVal) => {
    if (newVal) {
      getPendingOrderDetail();
    }
  },
  { immediate: true }
);

const orderData = reactive({});

const orderDetailList = computed(() => {
  return [
    { name: "币种名称", value: orderData.coin_name },
    { name: "挂单号", value: orderData.record_id || props.recordId },
    { name: "可卖出数量", value: orderData.quantity },
    {
      name: "卖出交易区间",
      value: `${orderData.min_quantity} ${orderData.coin_name} - ${orderData.max_quantity} ${orderData.coin_name}`,
    },
    { name: "手续费", value: orderData.fee_ratio },
    {
      name: "提交时间",
      value: dayjs(orderData.create_time * 1000).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      name: "挂单状态",
      value: statusStore.pendingOrderStatus?.find(
        (i) => i.key === orderData.status
      )?.name,
    },
  ];
});
// const reviewInfo = reactive({
//   is_review:orderData.
// })

const getPendingOrderDetail = async () => {
  try {
    loading.value = true;
    const res = await getSwapMarketDetailApi({
      record_id: props.recordId,
    });
    for (const item in res) {
      orderData[item] = res[item];
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};
const setPendingOrder = async (status) => {
  try {
    const data = {
      record_id: orderData.record_id,
      status,
    };
    const setRes = await postSwapMarketSetApi(data);
    ElMessage({
      showClose: false,
      message: t("设置成功！"),
      type: "success",
      grouping: true,
    });
    getPendingOrderDetail();
  } catch (e) {
    console.log(e);
  }
};
</script>
<style lang="scss">
.detailItem {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.625rem;
  font-size: 1rem;
}

.btnListCont {
  width: 100%;
  display: flex;
  padding: 20px 0;
}
</style>
